<template>
    <div v-if="pathShow" class="my-vip-root-main">
        <div class="title flex-between">
            <div v-if="userInfo" class="user-info c333">
                <img :src="userInfo.avatar" class="avatar" alt="" />
                <div class="user-title-vip">
                    <div class="user-title">
                        {{ userInfo.nickname }}
                    </div>
                    <div class="vip-type">
                        {{ getVipType }}
                    </div>
                </div>
            </div>
            <div class="code flex-center-align pointer" @click="goChangeCode()">
                <div class="icon_code">
                    <img
                        class="img100"
                        src="~/assets/images/userCenter/code.png"
                        alt=""
                    />
                </div>
                <div class="code_txt">兑换码</div>
            </div>
        </div>

        <div class="path-title">会员权益</div>
        <div class="hyqy-list">
            <div class="hyqy-item">
                <img
                    src="~/assets/images/userCenter/hyqy_icon_1.png"
                    alt="AI不限次提问"
                />
                AI不限次提问
            </div>
            <div class="hyqy-item">
                <img
                    src="~/assets/images/userCenter/hyqy_icon_2.png"
                    alt="普通问答不限"
                />
                普通问答不限
            </div>
            <div class="hyqy-item">
                <img
                    src="~/assets/images/userCenter/hyqy_icon_3.png"
                    alt="老师在线答疑"
                />
                老师在线答疑
            </div>
            <div class="hyqy-item">
                <img
                    src="~/assets/images/userCenter/hyqy_icon_4.png"
                    alt="为您双重保障"
                />
                为您双重保障
            </div>
        </div>

        <div class="path-title">购买会员</div>

        <!-- 会员套餐 -->
        <div class="vip-package">
            <div
                v-for="(item, index) in vipPackage"
                :key="index"
                class="vip-package-item"
                :class="{ 'vip-package-item-active': vipPackageIndex == index }"
                @click="selectPackage(index)"
            >
                <div class="vip-tip">
                    {{ getVipName(item.day) }}
                </div>
                <!-- <div class="vip-time">{{ item.name }}</div> -->
                <div class="new-moeny">
                    <span
                        class="span"
                        style="
                            color: #b27c20;
                            padding: 0;
                            font-size: 32px;
                            line-height: 42px;
                            top: 0;
                        "
                        >￥</span
                    ><template v-if="item.discount_price != 0"
                        ><countTo
                            ref="countTo"
                            :startVal="Number(item.amount)"
                            :endVal="item.discount_price"
                            :duration="2000"
                            :decimals="2"
                            separator=""
                            class="countTo"
                        ></countTo></template
                    ><template v-else>{{ Number(item.amount) }}</template>
                </div>
                <div class="face_value">原价{{ item.face_value }}元</div>
                <div class="kaitong" @click="payShow(item, 'vip')">
                    立即开通
                </div>
                <ul>
                    <li>
                        <span></span
                        ><template v-if="item.day == 1">24小时</template>
                        <template v-if="item.day == 30">一个月</template>
                        <template v-if="item.day == 365">一年</template
                        >内AI免费无限次提问
                    </li>
                    <li>
                        <span></span>
                        <template v-if="item.day == 1">24小时</template>
                        <template v-if="item.day == 30">一个月</template>
                        <template v-if="item.day == 365">一年</template
                        >内普通问答免费无限次提问
                    </li>
                    <li v-if="item.day == 1"><span></span>每月仅可购买1次</li>
                </ul>
            </div>
        </div>
        <!-- 会员套餐 end -->

        <div class="path-title">购买单次问答券</div>

        <div class="ask-coupon">
            <div class="ask-title">普通问答</div>
            <div
                v-for="(item, index) in couponList"
                :key="index"
                class="coupon-item"
            >
                <div class="name">
                    {{ item.type == 1 ? "普通问答" : "专家问答" }}
                </div>
                <div class="num">
                    <img
                        src="~/assets/images/userCenter/coupon-bj.png"
                        alt=""
                    />
                    <div class="money">
                        {{ item.unitprice }}<span>元/张</span>
                    </div>
                    <div class="money2">{{ item.number }}张</div>
                </div>
                <div class="text2">
                    <!-- 立省￥{{ item.preferential }} -->
                    总价{{ item.unitprice * item.number }}元，现在购买立省{{
                        item.preferential
                    }}元
                </div>
                <div class="pay">
                    <div class="left">
                        ￥<span>{{ item.price }}</span>
                    </div>
                    <div class="but" @click="payShow(item, 'coupon')">购买</div>
                </div>
            </div>
        </div>

        <div class="ask-coupon" style="padding-top: 159px">
            <div class="ask-title">专家问答</div>
            <div class="ask-info">
                一分钟接单 <span>·</span> 专家解答 <span>·</span> 专项解答
            </div>
            <div
                v-for="(item, index) in couponList2"
                :key="index"
                class="coupon-item"
            >
                <div class="name">
                    {{ item.type == 1 ? "普通问答" : "专家问答" }}
                </div>
                <div class="num">
                    <img
                        src="~/assets/images/userCenter/coupon-bj.png"
                        alt=""
                    />
                    <div class="money">
                        {{ item.unitprice }}<span>元/张</span>
                    </div>
                    <div class="money2">{{ item.number }}张</div>
                </div>
                <div class="text2">
                    总价{{ item.unitprice * item.number }}元，现在购买立省{{
                        item.preferential
                    }}元
                    <!-- 立省￥{{ item.preferential }} -->
                </div>
                <div class="pay">
                    <div class="left">
                        ￥<span>{{ item.price }}</span>
                    </div>
                    <div class="but" @click="payShow(item, 'coupon')">购买</div>
                </div>
            </div>
        </div>

        <!-- 充值弹窗 -->
        <div v-if="payItem" class="vipPay">
            <el-dialog :visible.sync="paymentShow" width="40%">
                <div class="vip-title c333">
                    购买{{
                        payItemType == "vip"
                            ? getVipName2(payItem.day)
                            : payItem.type == 1
                            ? "普通问答券"
                            : "专家问答券"
                    }}
                </div>
                <div class="flex-center">
                    <div class="vip-item">
                        <div v-if="payItemType == 'vip'" class="name">
                            {{ getVipName(payItem.day) }}
                        </div>
                        <div v-if="payItemType == 'coupon'" class="name">
                            {{ payItem.type == 1 ? "普通问答" : "专家问答"
                            }}{{ payItem.number }}张
                        </div>
                        <div class="money fz20 mt10">
                            ￥<span class="fz30">{{
                                payItemType == "vip"
                                    ? payItem.discount_price == 0
                                        ? payItem.amount
                                        : payItem.discount_price
                                    : payItem.price
                            }}</span>
                        </div>
                        <div v-if="tabsIndex != 2" class="old-money fz16 mt10">
                            原价：￥{{
                                payItemType == "vip"
                                    ? payItem.face_value
                                    : parseInt(payItem.preferential) +
                                      parseInt(payItem.price)
                            }}
                        </div>
                    </div>
                </div>

                <div class="flex" style="justify-content: space-around">
                    <div
                        class="payment flex-center-align pointer"
                        :class="{
                            paymentCurrent: select_pay_type == item.pay_type,
                        }"
                        v-for="(item, index) in paymentList"
                        :key="index"
                        @click="select_pay_type = item.pay_type"
                    >
                        <img
                            src="~/assets/images/service/pay_check1.png"
                            class="selectIcon"
                            v-if="select_pay_type == item.pay_type"
                        />
                        <img
                            src="~/assets/images/service/pay_check0.png"
                            class="selectIcon"
                            v-if="select_pay_type != item.pay_type"
                        />
                        <img :src="item.icon" class="icon" alt="" />

                        <span>{{ item.name }}</span>
                    </div>
                </div>

                <div class="btn" @click="submit">
                    立即{{ payItemType == "vip" ? "开通" : "购买" }}
                </div>

                <div class="xieyi">
                    <span class="agree">
                        支付即同意
                        <span
                            @click.stop="goPayXieyi()"
                            class="c1C8 fz14"
                            style="cursor: pointer"
                            >《支付协议》</span
                        >
                        <template v-if="payItemType == 'vip'">
                            和
                            <span
                                @click.stop="goVipXieyi()"
                                class="c1C8 fz14"
                                style="cursor: pointer"
                                >《会员协议》</span
                            >
                        </template>
                    </span>

                    <!-- <el-checkbox v-model="agree" true-label="1" false-label="0">
                    </el-checkbox> -->
                </div>
            </el-dialog>
        </div>

        <div v-html="payHtml"></div>
        <!-- 微信支付弹窗 -->
        <div class="wxPay">
            <el-dialog :visible.sync="wxPayShow" width="370px">
                <div class="wxPay-price">
                    ￥<span v-if="payItem" class="fz30">{{
                        payItemType == "vip"
                            ? payItem.discount_price == 0
                                ? payItem.amount
                                : payItem.discount_price
                            : payItem.price
                    }}</span>
                </div>
                <el-statistic
                    :value="deadline2"
                    time-indices
                    format="mm:ss"
                    title=""
                    @finish="hilarity"
                >
                    <template slot="suffix"> 后订单关闭 </template>
                </el-statistic>
                <div class="ErwmToast">
                    <div class="erwm">
                        <iframe
                            class="iframe mt20"
                            :src="iframeSrc"
                            naem="newPage"
                        />
                    </div>
                    <div class="flex-center-align mt20">
                        <img
                            src="~/assets/images/service/icon_pay1.png"
                            class="icon"
                            alt=""
                        />
                        <div class="fz22 c333">微信支付</div>
                    </div>
                </div>
            </el-dialog>
        </div>

        <!-- 兑换码弹窗 -->
        <div class="codePay">
            <el-dialog :visible.sync="codePayShow" width="22%">
                <div class="code-title c333 fz20">兑换码</div>
                <el-input v-model="code" class="mt30"></el-input>
                <div
                    class="button flex-center-align pointer"
                    @click="checkCode()"
                >
                    兑换
                </div>
            </el-dialog>
        </div>

        <!-- 兑换成功 -->
        <div class="codeSuccess">
            <el-dialog :visible.sync="codeSuccessShow" width="25%">
                <img
                    class="codeIcon"
                    src="~/assets/images/userCenter/duihuan_1.png"
                    alt=""
                />
                <div class="fz26 c333 mt30">{{ codeName }}</div>
                <div class="fz20 c333 mt30 mb20">恭喜您，兑换成功</div>
                <div class="codeSuccess-but">
                    <el-button
                        type="primary"
                        plain
                        round
                        @click="codeTypeClick"
                    >
                        <template v-if="codeType == 1">前往我的卡包</template>
                        <template v-if="codeType == 2">前往我的卡包</template>
                        <template v-if="codeType == 3">确定</template>
                    </el-button>
                </div>
            </el-dialog>
        </div>

        <!-- 兑换失败 -->
        <div class="codeSuccess">
            <el-dialog :visible.sync="codeFailShow" width="25%">
                <img
                    class="codeIcon"
                    src="~/assets/images/userCenter/duihuan_0.png"
                    alt=""
                />
                <div class="fz20 c333 mt30 mb20">抱歉，兑换失败</div>
            </el-dialog>
        </div>

        <div class="paySuccess">
            <el-dialog :visible.sync="paySuccessShow" width="408px">
                <el-result
                    icon="success"
                    title="支付成功"
                    subTitle="恭喜你，本次充值成功"
                >
                    <template v-if="payItemType == 'coupon'" slot="extra">
                        <el-button type="danger" plain round @click="goMyCoupon"
                            >查看问答券</el-button
                        >
                    </template>
                </el-result>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";

import { getComboList, goPay } from "@/assets/api/GPT";
import {
    getVipcomboList,
    payVip,
    payVipDetail,
    checkCode,
    WendavipGetCombo,
    WendacouponGetList,
    WendavipPayVip,
    WendacouponPaycoupon,
    WendacouponcouponPaydetail,
    WendavipPaydetail,
} from "@/assets/api/userCenterApi.js";

import { userGetUserInfo } from "@/assets/api/indexApi";

import { getTime2, goTopSmooth } from "@/assets/utils/utils";

import countTo from "vue-count-to";

export default {
    components: {
        countTo,
    },
    name: "myvip",
    metaInfo() {
        return {
            title: "个人中心-会员",
            meta: [{ name: "keywords", content: "小竹,财税,小竹财税" }],
        };
    },
    data() {
        return {
            activeIndex: "1",
            paymentShow: false, //会员充值弹窗
            wxPayShow: false, //微信支付弹窗
            codePayShow: false, //兑换码弹窗
            codeSuccessShow: false, //兑换成功弹窗
            codeFailShow: false, //兑换失败弹窗
            select_pay_type: 1, //选择支付宝还是微信支付
            deadline2: Date.now() + 1000 * 60 * 5,
            paymentList: [
                {
                    name: "支付宝",
                    pay_type: 1,
                    icon: require("~/assets/images/service/pay_zfb.png"),
                },
                {
                    name: "微信",
                    pay_type: 2,
                    icon: require("~/assets/images/service/pay_wx.png"),
                },
            ],
            equityList: [
                {
                    icon: require("~/assets/images/userCenter/icon_1.png"),
                    title: "问题库无限查看",
                },
                {
                    icon: require("~/assets/images/userCenter/icon_2.png"),
                    title: "财税法规无限查看",
                },
                {
                    icon: require("~/assets/images/userCenter/icon_3.png"),
                    title: "会计法规无限查看",
                },
                {
                    icon: require("~/assets/images/userCenter/icon_4.png"),
                    title: "小竹学院免费学习",
                },
                {
                    icon: require("~/assets/images/userCenter/icon_5.png"),
                    title: "一对一专业客服",
                },
                {
                    icon: require("~/assets/images/userCenter/icon_6.png"),
                    title: "模板专区免费下载",
                },
            ],
            packageList: [],
            packageCurrent: 0,
            agree: "",
            id: 0, //套餐id

            code: "", //兑换码
            codeName: "",
            codeType: "",

            payHtml: "", //支付宝支付
            iframeSrc: "", //微信二维码地址
            tabsIndex: null,

            vipPackage: [],
            vipPackageIndex: 0,

            pathShow: false,

            couponList: [],
            couponList2: [],

            getVipName: function (day) {
                if (day == 1) return "1天";
                if (day == 30) return "1个月";
                if (day == 365) return "1年";
            },
            getVipName2: function (day) {
                if (day == 1) return "一天会员";
                if (day == 30) return "月度会员";
                if (day == 365) return "年度会员";
            },
            payItemType: "",
            payItem: null,
            paySuccessShow: false,

            discount: 1,
        };
    },
    mounted() {
        goTopSmooth();
        this.getVipcomboList();

        this.checkVipType();

        this.WendacouponGetList();

        this.pathShow = true;
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),

        getVipType: function () {
            if (!this.userInfo) return;
            if (this.userInfo.is_99vip == 1) return "99VIP会员";
            if (this.userInfo.is_gpt_vip == 0) return "您当前未开通会员";
            else {
                let VIP = "";
                // switch (this.userInfo.is_gpt_vip) {
                //     case 1:
                //         VIP = "一天会员";
                //         break;
                //     case 2:
                //         VIP = "月度会员";
                //         break;
                //     case 3:
                //         VIP = "年度会员";
                //         break;
                // }
                VIP += `${this.userInfo.gpt_vip_end_time_text}到期`;
                return VIP;
            }
        },
    },
    methods: {
        ...mapActions("common", ["getUserInfo"]),
        ...mapMutations("common", ["setuserInfo"]),
        //   获取会员套餐列表
        async getVipcomboList() {
            let { data, code } = await getVipcomboList();
            if (code == 1) {
                this.packageList = data;
                this.id = data[0].id;
            }
        },

        selectFn(item, index) {
            this.packageCurrent = index;
            this.id = item.id;
        },
        goPayXieyi() {
            window.open("https://api.xiaozhucaishui.com/xieyi/pay.html");
        },
        goVipXieyi() {
            window.open("https://api.xiaozhucaishui.com/xieyi/user.html");
        },
        goMyCoupon() {
            this.$router.push({
                path: "/user/mycoupon",
            });
        },
        goChangeCode() {
            this.codePayShow = true;
        },
        async checkCode() {
            if (this.code == "") {
                this.$message("请填写兑换码");
                return;
            }
            const res = await checkCode({ code: this.code });
            console.log("兑换码结果", res);
            //查看兑换类型  1:普通问答券 2：专家问答券 3：1个月问答会员
            if (res.code == 1) {
                this.codeType = res.data.type;
                if (res.data.type == 1) {
                    this.codeName = "普通问答券";
                } else if (res.data.type == 2) {
                    this.codeName = "专家问答券";
                } else {
                    this.codeName = "1个月问答会员";
                }
                this.codeSuccessShow = true;
                this.codePayShow = false;
                this.code = "";
                this.getUserInfo();
            } else {
                this.codeFailShow = true;
                this.codePayShow = false;
                this.code = "";
            }
        },

        codeTypeClick() {
            if (this.codeType == 3) {
                this.codeSuccessShow = false;
            } else {
                this.$router.push({
                    path: "/user/mycoupon",
                });
            }
        },

        submit() {
            if (this.payItem.day == 1 && this.userInfo.onemonth_vip == 1) {
                this.$alert(
                    "本月已体验会员1天，升级为月度会员，尽享更多精彩！",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        closeOnClickModal: true,
                    }
                );
                return;
            }
            // if (this.agree == "") {
            // this.$message("请勾选下方协议");
            // return;
            // } else {
            this.payVip();
            // }
        },

        payShow(item, type) {
            this.paymentShow = true;
            this.payItem = item;
            this.payItemType = type;
        },

        async payVip() {
            var params = {
                id: this.payItem.id,
                source: "web",
                pay_type: this.select_pay_type,
            };
            if (this.payItemType == "vip") {
                params.pay_type == 1
                    ? (params.pay_type = 2)
                    : (params.pay_type = 1);
                console.log(params);
                var res = await goPay(params);
                // var res = await WendavipPayVip(params);
            } else {
                params.price = this.payItem.price;
                params.manager_id = this.payItem.id;
                params.type = this.payItem.type;
                var res = await WendacouponPaycoupon(params);
            }
            if (res.code == 1) {
                if (this.select_pay_type == 1) {
                    this.payHtml = res.data;
                    this.$nextTick(() => {
                        document.forms[0].submit();
                    });
                } else {
                    this.wxPayShow = true;
                    this.iframeSrc = res.data;
                    this.orderNo = res.msg;
                    this.deadline2 = Date.now() + 1000 * 60 * 5;
                    this.getWxPayType();
                }
            }
        },

        async getWxPayType() {
            if (!this.iframeSrc) return;
            if (this.payItemType == "vip") {
                // var res = await WendavipPaydetail({
                //     order_no: this.orderNo,
                // });
                var res = await userGetUserInfo({});
                if (
                    this.userInfo.gpt_vip_end_time < res.data.gpt_vip_end_time
                ) {
                    this.wxPayShow = false;
                    this.paymentShow = false;
                    this.iframeSrc = "";
                    this.setuserInfo(res.data);
                    this.$message({
                        message: "会员购买成功",
                        type: "success",
                    });
                    this.paySuccessShow = true;
                    if (this.$route.query.is_back == 1) {
                        this.$router.go(-1);
                    }
                } else {
                    setTimeout(() => {
                        this.getWxPayType();
                    }, 3000);
                }
                return;
            } else {
                var res = await WendacouponcouponPaydetail({
                    order_no: this.orderNo,
                });
                if (res.code == 1) {
                    if (res.data.status == 2) {
                        this.wxPayShow = false;
                        this.paymentShow = false;
                        this.iframeSrc = "";
                        this.getUserInfo();
                        this.paySuccessShow = true;

                        if (this.$route.query.is_back == 1) {
                            this.$router.go(-1);
                        }
                    } else {
                        setTimeout(() => {
                            this.getWxPayType();
                        }, 3000);
                    }
                }
            }
        },

        // 微信支付弹窗倒计时结束
        hilarity() {
            if (!this.wxPayShow) return;
            this.wxPayShow = false;
            this.iframeSrc = "";
            this.$alert("支付二维码已过期", "提示", {
                confirmButtonText: "确定",
                callback: (action) => {},
            });
        },

        // 切换会员类型
        async checkVipType() {
            // const res = await WendavipGetCombo({});
            // if (res.code == 1) {
            //     this.vipPackageIndex = 0;
            //     this.vipPackage = res.data;
            // }

            const res = await getComboList({});
            if (res.code == 1) {
                this.vipPackageIndex = 0;
                this.vipPackage = res.data;
            }
        },

        selectPackage(index) {
            this.vipPackageIndex = index;
        },

        async WendacouponGetList() {
            const res = await WendacouponGetList({});
            if (res.code == 1) {
                // this.couponList = res.data;
                for (let item of res.data) {
                    if (item.type == 1) this.couponList.push(item);
                    if (item.type == 2) this.couponList2.push(item);
                }
            }
        },
    },
};
</script>
<style lang="scss" scoped>
@import url("@/assets/static/reset.css");

.my-vip-root-main {
    background-color: #fff;
    margin-left: 20px;
    min-height: 480px;
    padding-bottom: 30px;
    .title {
        padding: 30px;
        font-size: 18px;
        height: 80px;
        border-bottom: 1px solid #ececec;
    }
    .code {
        // position: absolute;
        // bottom: 20px;
        // right: 20px;
        // margin-top: 5px;
        // margin-right: 5px;
        width: 97px;
        height: 36px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #a5a5a5;
        margin-right: 30px;

        .icon_code {
            display: inline-block;
            width: 20px;
            height: 20px;
        }

        .code_txt {
            font-size: 14px;
            color: #333333;
        }
        // .cPt {
        //   color: #4281b1;
        // }
    }

    .vipPay {
        .vip-title {
            text-align: center;
            margin-bottom: 40px;
            font-size: 24px;
            font-weight: 500;
        }
        .vip-item {
            position: relative;
            text-align: center;
            padding: 30px 10px;
            margin-right: 20px;
            width: 171px;
            height: 175px;
            background: #fffbf5;
            border-radius: 10px;
            border: 1px solid #f1e0c6;

            &:last-child {
                margin-right: 0 !important;
            }

            &.active {
                background: #fff2df;
                border: 1px solid #ff861b !important;

                .money {
                    color: #ff502f;
                }
            }

            .name {
                font-size: 20px;
                font-weight: 500;
                color: #333333;
            }
            .money {
                color: #fa5151;
            }
            .old-money {
                color: #b09163;
                text-decoration: line-through;
            }
            .imgHot {
                position: absolute;
                top: -20px;
                left: 0;
                width: 64px;
                height: 26px;
            }
        }

        .payment {
            margin-top: 43px;
            padding: 0 30px;
            width: 210px;
            height: 68px;
            background: #ffffff;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #ececec;
            font-size: 18px;

            &.paymentCurrent {
                box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
            }

            .selectIcon {
                width: 25px;
                height: 25px;
            }

            .icon {
                margin: 0 10px;
                width: 40px;
                height: 40px;
            }
        }

        .btn {
            text-align: center;
            line-height: 49px;
            color: #fff;
            cursor: pointer;
            width: 238px;
            height: 49px;
            background: linear-gradient(90deg, #fa5151 0%, #ff7f5a 100%);
            border-radius: 6px;
            margin: 30px auto 0;
        }

        .xieyi {
            font-size: 14px;
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            color: #9e9e9e;
            margin-top: 18px;
            margin-bottom: 25px;
            text-align: center;
        }
    }

    .ErwmToast {
        text-align: center;

        .erwm {
            display: flex;
            align-items: center;
            justify-content: center;

            .iframe {
                width: 333px;
                height: 333px;
                border-width: 0;
            }
        }

        .icon {
            margin-right: 5px;
            width: 30px;
            height: 30px;
        }
    }

    .codePay {
        text-align: center;

        .button {
            margin: 0 auto;
            margin-top: 32px;
            width: 183px;
            height: 47px;
            background: #1c87f3;
            color: #fff;
            border-radius: 82px;
        }
    }

    .codeSuccess {
        text-align: center;

        .codeIcon {
            width: 78px;
            height: 78px;
        }
    }

    .title {
        font-size: 18px;
        height: 117px;
        border-bottom: 1px solid #ececec;
        background: #f6f9ff;
        align-items: center;
        .user-info {
            display: flex;
            align-items: center;
            .avatar {
                width: 65px;
                height: 65px;
                border-radius: 65px;
                object-fit: cover;
            }
            .user-title-vip {
                padding-left: 19px;
            }
            .user-title {
                font-size: 24px;
                font-weight: 600;
                color: #333333;
            }

            .vip-type {
                padding-top: 8px;
                font-size: 16px;
                color: #999999;
            }
        }
    }

    .vip-package {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 37px;
        .vip-package-item {
            padding: 22px 22px 0;
            height: 314px;
            width: 274px;
            background: #ffffff;
            // box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
            border: 1px solid #b3b3b3;
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            .vip-tip {
                width: 135px;
                height: 26px;
                background: linear-gradient(90deg, #fa623a 0%, #ff935a 100%);
                font-size: 20px;
                font-family: OPPOSans, OPPOSans;
                font-weight: 500;
                color: #ffffff;
                line-height: 26px;
                text-align: center;
                position: absolute;
                right: -29px;
                top: 25px;
                transform: rotate(45deg);
            }
            .vip-time {
                font-size: 24px;
                font-family: OPPOSans, OPPOSans;
                font-weight: 700;
                color: #333333;
            }

            .new-moeny {
                padding-top: 31px;
                display: flex;
                align-items: flex-end;
                justify-content: center;
                padding-right: 8px;
                .span {
                    font-size: 22px;
                    font-family: OPPOSans, OPPOSans;
                    font-weight: 500;
                    color: #9c9c9c;
                    padding-left: 4px;
                    position: relative;
                    top: -2px;
                }
                .countTo {
                    font-size: 50px;
                    font-family: cursive;
                    font-weight: 700;
                    color: #b27c20;
                    position: relative;
                    top: 6px;
                }
            }

            .face_value {
                text-decoration-line: line-through;
                font-size: 22px;
                font-family: OPPOSans, OPPOSans;
                font-weight: 500;
                color: #9c9c9c;
                text-align: center;
                margin-top: 6px;
            }

            .kaitong {
                width: 175px;
                height: 42px;
                line-height: 42px;
                background: linear-gradient(90deg, #ff7f5a 0%, #fa5151 100%);
                border-radius: 42px;
                font-size: 24px;
                font-family: OPPOSans, OPPOSans;
                font-weight: 500;
                color: #ffffff;
                text-align: center;
                cursor: pointer;
                user-select: none;
                margin: 13px auto 0;
                &:hover {
                    opacity: 0.9;
                }
                &:active {
                    opacity: 0.8;
                }
            }
            ul {
                margin-top: 17px;
                li {
                    display: flex;
                    align-items: center;
                    height: 30px;
                    line-height: 30px;
                    font-size: 12px;
                    font-family: OPPOSans, OPPOSans;
                    font-weight: 400;
                    color: #333333;
                }
                span {
                    margin-right: 12px;
                    width: 6px;
                    height: 6px;
                    background: #999999;
                    border-radius: 6px;
                }
            }
        }

        .vip-package-item-active {
            // background: #fff5f7;
            // border-color: #fa5555;
        }
    }

    &::v-deep .is-active {
        border-bottom-color: white !important;
    }

    .wxPay ::v-deep .el-dialog__body {
        padding: 0 0 30px !important;
    }
}

.wxPay-price {
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    color: #ff5967;
}

.path-title {
    font-size: 24px;
    font-family: OPPOSans, OPPOSans;
    font-weight: 500;
    color: #333333;
    padding: 50px 0 30px 40px;
}

.ask-coupon {
    width: 860px;
    margin: 0 auto;
    background: linear-gradient(180deg, #fae7d9 0%, #fefbf8 100%);
    border-radius: 20px;
    padding: 35px 37px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 36px;
    position: relative;
    padding-top: 100px;
    .ask-title {
        top: 30px;
        width: 860px - 37px * 2;
        position: absolute;
        text-align: center;
        font-size: 30px;
        font-family: OPPOSans, OPPOSans;
        font-weight: 500;
        color: #333333;
    }
    .ask-info {
        width: 390px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border-radius: 156px 156px 156px 156px;
        border: 1px solid #fde5c9;
        font-size: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: 400;
        color: #c2752e;
        margin: 0 auto;
        position: absolute;
        top: 90px;
        left: 236px;
        span {
            padding: 0 5px;
            font-size: 30px;
        }
    }
}
.coupon-item {
    width: 240px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 35px;
    .name {
        text-align: center;
        font-size: 20px;
        font-family: OPPOSans, OPPOSans;
        font-weight: 500;
        color: #333333;
        padding-top: 18px;
    }
    .num {
        width: 102px;
        height: 99px;
        margin: 14px auto;
        position: relative;
        img {
            position: absolute;
            width: 102px;
            height: 99px;
        }
        .money {
            position: relative;
            z-index: 1;
            font-size: 30px;
            font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
            font-weight: 500;
            color: #9f5935;
            text-align: center;
            padding-top: 13px;
            span {
                font-size: 20px;
            }
        }
        .money2 {
            padding-top: 15px;
            position: relative;
            z-index: 1;
            font-size: 20px;
            font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
            font-weight: 500;
            color: #9f5935;
            text-align: center;
        }
    }
    .text2 {
        text-align: center;
        padding: 13px 0 16px;
        font-size: 13px;
        font-family: OPPOSans, OPPOSans;
        font-weight: 500;
        color: #fa5151;
    }

    .pay {
        height: 61px;
        background: linear-gradient(270deg, #fa6039 0%, #ff985d 100%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 18px;
        .left {
            font-size: 20px;
            font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
            font-weight: 400;
            color: #ffffff;
            span {
                font-size: 30px;
                font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
                font-weight: 500;
                color: #ffffff;
            }
        }
        .but {
            width: 79px;
            line-height: 35px;
            height: 35px;
            background: linear-gradient(180deg, #fbe6cb 0%, #fcdcad 100%);
            border-radius: 52px;
            text-align: center;
            font-size: 16px;
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            color: #a35d2a;
            user-select: none;
            cursor: pointer;
            &:hover {
                opacity: 0.9;
            }
            &:active {
                opacity: 0.8;
            }
        }
    }
}

.hyqy-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 37px 0;
    .hyqy-item {
        font-size: 24px;
        color: #333333;
        line-height: 32px;
        display: flex;
        align-items: center;
        img {
            height: 40px;
            width: 40px;
            display: block;
            margin-right: 8px;
        }
    }
}

.vipPay {
    ::v-deep .el-dialog {
        border: 6px solid #fa5151;
        border-radius: 0;
    }
    ::v-deep .el-dialog__body {
        padding-top: 0;
    }
}
</style>
